<template>
  <span
    v-if="icon.type === 'svg' && icon.content"
    v-html="icon.content"
    class="vc-icon"
    :style="svgStyle"
  ></span>
  <img
    v-else-if="icon.type === 'base64' && icon.content"
    :src="'data:image/png;base64,' + icon.content"
    :style="base64Style"
    alt=""
  />
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import { getIconList } from '@/utils/system';

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});

const icon = ref({});

const svgStyle = computed(() => {
  const compStyle = props.compStyle || {};
  const result = {};
  result['font-size'] = compStyle['size'] ? (compStyle['size'] + 'px') : 'inherit';
  result['color'] = compStyle['color'] || 'inherit';
  return result;
});

const base64Style = computed(() => {
  const compStyle = props.compStyle || {};
  const result = {};
  result['width'] = compStyle['size'] ? (compStyle['size'] + 'px') : 'inherit';
  result['height'] = compStyle['size'] ? (compStyle['size'] + 'px') : 'inherit';
  result['color'] = compStyle['color'] || 'inherit';
  return result;
});

const init = async() => {
  const compStyle = props.compStyle || {};
  const iconId = compStyle['iconId'];
  const iconList = await getIconList();
  icon.value = iconList.find(item => item.id === iconId) || {};
};

watch(() => props.compStyle, () => {
  init();
}, {deep: true});

onMounted(() => {
  init();
});
</script>

<style scoped>
.vc-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: inherit;
  width: 1em!important;
  height: 1em!important;
}
.vc-icon svg {
  width: 1em;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>